<template>
  <AdaptiveView>
    <div class="screen-container">
      <div class="screen-content" ref="screenRef">
        <div class="h-full flex items-center justify-center">
          <svg-icon
            :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
            class="text-[24px] c-#ceeaff full_icon"
            @click="toggle"
          />
          <div class="jt_content flex items-center justify-center flex-col">
            <img
              class="jt_logo"
              src="@/assets/images/screen/jtlogo.png"
              alt=""
            />
            <p class="jt_title">大连金泰MOM系统</p>
            <div class="flex jt_card_box">
              <div class="jt_card_single">
                <div class="text" @click="jumpUrl('/dataScreen/JTScreen01')">
                  生产计划
                </div>
              </div>
              <div class="jt_card_single">
                <div class="text" @click="jumpUrl('/dataScreen/JTScreen02')">
                  生产实时
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AdaptiveView>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { useFullscreen } from "@vueuse/core";

defineOptions({
  name: "DATASCREENJTDASHBOARD",
  inheritAttrs: false,
});

// const route = useRoute();
const router = useRouter();

function jumpUrl(url: string) {
  router.push({ path: url });
}

/**
 * vueUse 全屏
 */
const { isFullscreen, toggle } = useFullscreen();

onMounted(() => {
  if (isFullScreenFn()) {
    toggle();
  }
});

function isFullScreenFn() {
  return !!(
    document?.fullscreenElement || // 标准API
    document?.webkitFullscreenElement || // Chrome, Safari and Opera
    document?.mozFullScreenElement || // Firefox
    document?.msFullscreenElement
  );
}

onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
.screen-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-image: url("@/assets/images/screen/home_bg.png");
  }

  .screen-content {
    width: 1678px;
    height: 946px;
    box-sizing: border-box;
    // padding: 12px;
    background-image: url("@/assets/images/screen/home_bg.png");
    transition: all 0.2s ease-in-out;

    :deep(.el-card) {
      background-color: transparent;
      border: none;
      .el-card__header {
        background: rgba(212, 219, 249, 0.1);
        border-bottom: none;
        color: white;
        .el-card-title {
          color: white;
        }
      }
    }

    .full_icon {
      position: fixed;
      right: 50px;
      top: 50px;
      cursor: pointer;
    }
    .jt_content {
      // background: url(@/assets/images/screen/pageBg1.png) center center / 100%
      //   100% no-repeat;
      padding: 40px;
      border-radius: 20px;
      .jt_logo {
        width: 790px;
        height: auto;
      }
      .jt_title {
        font-size: 88px;
        font-family: YOUSHE;
        writing-mode: horizontal-tb;
        text-orientation: upright;
        color: transparent;
        background: linear-gradient(
            0deg,
            rgb(255, 255, 255) 0px,
            rgb(255, 255, 255) 100%
          )
          text;
        clip-path: inset(1px);
        margin: 20px 0;
      }
      .jt_card_box {
        display: flex;
        justify-content: center;
        align-items: center;
        .jt_card_single {
          cursor: pointer;
          font-family: YOUSHE;
          // font-weight: bold;
          text-align: center;
          line-height: 230px;
          width: 500px;
          height: 200px;
          font-size: 60px;
          border-radius: 8px;
          background: url(@/assets/images/screen/preview10.png) center center /
            100% 100% no-repeat;
          margin: 0 15px;

          .text {
            writing-mode: horizontal-tb;
            word-spacing: 0px;
            letter-spacing: 8px;
            text-orientation: upright;
            color: rgb(255, 255, 255);
            filter: drop-shadow(rgb(102, 204, 255) 0px 0px 1px)
              drop-shadow(rgb(44, 163, 239) 0px 0px 25px);
            user-select: text;
          }
        }
      }
    }

    .loading-title {
      font-size: 16px;
      color: #fff;
      margin-top: 10px;
    }
  }
}
</style>
